<template>
  <div class="detail-page">
    <article-detail :id="id"></article-detail>
  </div>
  <footer-menus></footer-menus>
</template>

<script setup lang="ts">
import {ref, onActivated} from "vue";
import {useRoute} from "vue-router";
import ArticleDetail from '../../components/article-detail.vue'
import FooterMenus from '../../components/footer-menus.vue'

defineOptions({
  name: "Detail"
})
const route = useRoute()
const id = ref(route.query.id)
onActivated(() => {
  if (id.value !== route.query.id) {
    id.value = route.query.id
  }
})
</script>

<style scoped lang="less">
.detail-page{
  padding: 10px 0 102px;
}
</style>
